<template>
  <div>
      <!-- 头部 -->
      <div class="head">
        <input style="text" @click="$router.push('./search')">
        <div class="font-l">
          <van-icon class-prefix="icon" name="zuji" />
          <span>足迹</span>
        </div>
        <div class="font-r">
          <van-icon class-prefix="icon" name="xiaoxi" />
          <span>消息</span>
        </div>
      </div>
      <!-- /头部 -->
      <!-- 轮播图 -->
      <van-pull-refresh v-model="isLoading" :head-height="100" @refresh="onRefresh">
  <!-- 下拉提示，通过 scale 实现一个缩放效果 -->
          <template #pulling="props">
            <img
              class="doge"
              src="https://img01.yzcdn.cn/vant/doge.png"
              :style="{ transform: `scale(${props.distance / 80})` }"
            />
          </template>

          <!-- 释放提示 -->
          <template #loosing>
            <img class="doge" src="https://img01.yzcdn.cn/vant/doge.png" />
          </template>

          <!-- 加载提示 -->
          <template #loading>
            <img class="doge" src="https://img01.yzcdn.cn/vant/doge-fire.jpg" />
          </template>
          <div class="lb">
            <van-swipe class="home-swipe" :autoplay="3000" indicator-color="white">
                  <van-swipe-item v-for="i in banners" :key="i.id">
                    <img :src="i.picUrl" alt="">
                  </van-swipe-item>
            </van-swipe>

            </div>
            <!-- /轮播图 -->
            <!-- 宫格导航 -->
            <div class="gg" >
                <van-grid clickable column-num=5 icon-size=40>
                <van-grid-item
                v-for="i in grids"
                :key="i.id"
                :icon="i.icon"
                :to="'/itemList/'+i.id"
                :text="i.name" />
            </van-grid>

            </div>
            <!-- 宫格导航 -->
            <!-- 推荐商品 -->
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多内容"
                @load="onLoad"
                v-if="lists.length"
            >
              <Recommend @addCart="addCart" @clickItem="enterDetail" :lists="lists"/>
            <!-- /推荐商品 -->
            </van-list>
            <My-Tabbar/>
        </van-pull-refresh>
  </div>
</template>

<script>
import MyTabbar from '@components/MyTabbar'
import Recommend from './component/Recommend'
import { fetchCates, slideShow, RequestList } from '@api'
import { isLogin } from '@utils'
export default {
  name: 'home',
  data () {
    return {
      cates: [],
      banners: [],
      grids: [],
      // 近期热门
      lists: [],
      isLoading: false, // 下拉状态
      page: 1, // 当前页
      pageSize: 4, // 一页多少条
      loading: false, // 上拉是否触底
      finished: false // 数据是否到底
    }
  },
  created () {
    this.fetchCates()
    this.slideShow()
    this.RequestList()
  },
  methods: {
    addCart (item) {
      // 判断是否登录
      if (!isLogin()) {
        // 没登陆 跳转到登录页
        this.$router.push('/login')
        return
      }
      // 点击加入购物车
      this.$store.commit('cart/add_cart', item)
    },
    enterDetail (id) {
      // 进入详情页
      this.$router.push({
        path: '/detail',
        query: {
          id
        }
      })
    },
    onLoad () {
      /*
       上拉触底
       请求下一页数据
      */
      this.RequestList()
      this.page++
    },
    onRefresh () {
      // 用户触发下拉事件
      // 重新请求列表数据
      // 初始化上拉加载的状态
      this.page = 1
      this.lists = []
      this.finished = false
      this.RequestList()
    },
    RequestList () {
      // 近期热门
      RequestList({
        categoryId: 228957,
        page: this.page,
        pageSize: this.pageSize
      }).then(res => {
        // 下拉刷新完成
        this.isLoading = false
        // 加载下一页数据完成 此次上拉触底 状态变成false
        this.loading = false
        if (res.data.code === 0) {
          this.lists = [...this.lists, ...res.data.data]
        }
        if (res.data.code === 700) {
          // 没有数据 到了最后一页上拉加载事件不在触发
          this.finished = true
        }
      })
    },
    fetchCates () {
      fetchCates().then(res => {
        if (res.data.code === 0) {
          // console.log(res)
          this.grids = res.data.data
        }
      })
    },
    slideShow () {
      // 请求数据
      slideShow().then(res => {
        if (res.data.code === 0) {
          this.banners = res.data.data
        }
      })
    }
  },
  components: {
    MyTabbar,
    Recommend
  }
}
</script>

<style lang="scss" scoped>
.head{
  position: fixed;
  z-index: 10;
  display: flex;
  flex: 1;
  width: 100%;
  height: 80px;
  background-color: #ff2e82;
  align-items: center;
  justify-content: space-around;
  & input{
    width: 255px;
    height: 50px;
    border-radius: 35px;
    border: 1px solid #ff2e82;
  }
  & .icon {
    display: block;
    font-size: 30px;
    color: #ffebf3;
  }
  & span{
    font-size: 12px;
    color: #ffebf3;
  }
}
.lb{
  position: relative;
  top: 82px;
  height: 185px;
  .home-swipe{
    height: 100%;
    img{
      width: 100%;
      height: 100%;
    }
  }
}
.gg{
  margin-top: 85px;
  /deep/ .van-grid {
    .van-grid-item__text{
      font-size: 12px;
    }
  }
}
  .doge {
    width: 140px;
    height: 72px;
    margin-top: 8px;
    border-radius: 4px;
  }
  .doge{
    width: 100%;
    height: 100%;
  }
</style>
